<template lang="">
    <view class="home">
       <view class="hotKeyData">
       				<view class="box">
       					<view class="greenData" >
       						<view class="greenDataItem" v-for="(item,index) in greenData" :key="index">
       							<view class="icon">
       							</view>
       							<text>
									{{item}}
       							</text>
       						</view>
						</view>
       					<view class="redData">
       						<view class="redDataItem" v-for="(item,index) in redData" :key="item">
       							<view class="icon">
       							</view>
       							<text>
       								{{item}}
       							</text>
       						</view>
							
       					</view>
       				</view>
       				<view class="title">
       					活跃
       				</view>
       				
       			</view>
    </view>
</template>
<script>
export default {
    data() {
    	return {
    		
    	};
    },
    props:{
    	greenData : Array,
    	redData : Array,
    },
	methods:{
		
	},
	mounted() {
		// console.dir(this.greenData)
		// console.dir(this.redData)
	},
}
</script>
<style lang="scss" scoped>
    .home{
			.hotKeyData{
				height: 300rpx;
				background-color: #fff;
				display: grid;
				place-items: center;
				overflow: hidden;
				position: relative;
				width: 100%;
				.box{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					background: linear-gradient(to bottom, #F4F8FD 0%, #F4F8FD 100%);
					border-radius: 50%;
					width: 640rpx;
					height: 640rpx;
					display: flex;
					align-items: center;
					&::after{
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						background: linear-gradient(to bottom, #E0EBFD 0%, #F4F8FD 100%);
						transform: translate(-50%,-50%);
						width: 488rpx;
						height: 488rpx;
						border-radius: 50%;
						z-index: 1;
					}
					&:before{
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						background: linear-gradient(to bottom, #C9DDFD 0%, #E0EBFD 100%);
						width: 240rpx;
						height: 240rpx;
						border-radius: 50%;
						z-index: 2;
					}
					.greenData{
						width: 450rpx;
						height: 230rpx;
						position: relative;
						.greenDataItem{
							color: #888888;
							position: absolute;
							top: 0;
							left:0;
							width: 100rpx;
							height: 56rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							&::after{
								content: '';
								position: absolute;
								top: 2%;
								left: 40%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #75C9B6;
							}
							&:before{
								content: '';
								position: absolute;
								top: -9%;
								left: 35%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#75C9B6;
								opacity:0.3;
							}
						}
						.greenDataItem:nth-child(2){
							color: #888888;
							position: absolute;
							top: 12%;
							left:40%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 5%;
								left: 39%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #75C9B6;
							}
							&:before{
								content: '';
								position: absolute;
								top: -6%;
								left: 33%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#75C9B6;
								opacity:0.3;
							}
						}
						.greenDataItem:nth-child(3){
							color: #888888;
							position: absolute;
							top: -2%;
							left:94%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 4%;
								left: 38%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #75C9B6;
							}
							&:before{
								content: '';
								position: absolute;
								top: -9%;
								left: 32%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#75C9B6;
								opacity:0.3;
							}
						}
						.greenDataItem:nth-child(4){
							color: #888888;
							position: absolute;
							top: 50%;
							left:29%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 4%;
								left: 38%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #75C9B6;
							}
							&:before{
								content: '';
								position: absolute;
								top: -8%;
								left: 32%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#75C9B6;
								opacity:0.3;
							}
						}
						.greenDataItem:nth-child(5){
							color: #888888;
							position: absolute;
							top: 80%;
							left:94%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 4%;
								left: 38%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #75C9B6;
							}
							&:before{
								content: '';
								position: absolute;
								top: -6%;
								left: 31%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#75C9B6;
								opacity:0.3;
							}
						}
						
					}
					.redData{
						width: 180rpx;
						height: 230rpx;
						position: relative;
						.redDataItem{
							color: #888888;
							position: absolute;
							top: 4%;
							left:54%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 4%;
								left: 38%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #F28F81;
							}
							&:before{
								content: '';
								position: absolute;
								top: -6%;
								left: 31%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#F28F81;
								opacity:0.3;
							}
						}
						.redDataItem:nth-child(2){
							color: #888888;
							position: absolute;
							top: 30%;
							left:22%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 4%;
								left: 38%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #F28F81;
							}
							&:before{
								content: '';
								position: absolute;
								top: -6%;
								left: 31%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#F28F81;
								opacity:0.3;
							}
						}
						.redDataItem:nth-child(3){
							color: #888888;
							position: absolute;
							top: 70%;
							left:54%;
							width: 100rpx;
							height: 57rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							font-size: 22rpx;
							z-index: 99;
							&::after{
								content: '';
								position: absolute;
								top: 4%;
								left: 38%;
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #F28F81;
							}
							&:before{
								content: '';
								position: absolute;
								top: -6%;
								left: 31%;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-color:#F28F81;
								opacity:0.3;
							}
						}
						
					}
					
				}
				.title{
					border-radius: 50%;
					color: #fff;
					background-color: #6197FC;
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					font-size: 20rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					display: flex;
					justify-content: center;
					align-items: center;
					
				}
			}
					
	}
</style>